<template>
  <div>
    <div>
      <van-nav-bar
          title="填写备注"
          left-text="返回"
          right-text="按钮"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight(order.info)"
      />
    </div>
    <div style="margin-bottom: 20px"></div>
    <div>
      <van-cell-group inset color="#636563F">
        <van-field
            v-model="order.info"
            size="large"
            rows="5"
            autosize
            label="备注"
            type="textarea"
            placeholder="在这里填写你的备注信息"
            maxlength="200"
            show-word-limit
        />
      </van-cell-group>
      <div style="margin-bottom: 20px"></div>
      <div v-for="m in message">
        <van-button class="btn1" v-model="message" size="small" @click="dj(m)">
          {{ m }}
        </van-button>
      </div>
    </div>
  </div>
  <div></div>
</template>

<script>
export default {
  name: "RemarksView",
  data() {
    return {
      message: ["预约订单，请准时送达", "如果没人就放门口", "请不要敲门，到了打电话", "无接触配送","不用太着急，请注意安全"],
      order:{
        info: "",
        oid:""
      }
    }
  }, methods: {
    dj(m) {
      this.order.info += m + "  ";
      console.log(this.order.info)
    },
    onClickLeft() {
      history.back()
    },
    onClickRight(info) {
      this.$router.push({path:"/pay",query:{info:info}});
    }
  }
}
</script>

<style scoped>
.btn1{
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  border-radius: 10px;
  border-color: green;

}
</style>